import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import loginView from "../views/loginView.vue";

Vue.use(VueRouter)

const routes = [
  // {
  //   path: "/",
  //   redircet: "/HomeView",
  // },
  {
    path: "/",
    name: "HomeView",
    component: HomeView,
    redirect: "/HomeView/htmlView",
    children: [
      {
        path: "/HomeView/htmlView",
        name: "htmlView",
        component: () => import("../views/htmlView.vue"),
        meta: {
          title: "html面试题",
          isShow: true,
          img: "el-icon-folder",
        },
      },
      {
        path: "/HomeView/cssView",
        name: "cssView",
        component: () => import("../views/cssView.vue"),
        meta: {
          title: "css面试题",
          img: "el-icon-folder-opened",
          isShow: true,
        },
      },
      {
        path: "/HomeView/javascriptView",
        name: "javascriptView",
        component: () => import("../views/javascriptView.vue"),
        meta: {
          title: "JavaScript面试题",
          isShow: true,
          img: "el-icon-folder-add",
        },
      },
      {
        path: "/HomeView/vue2View",
        name: "vue2View",
        component: () => import("../views/vue2View.vue"),
        meta: {
          title: "vue2面试题",
          isShow: true,
          img: "el-icon-folder-remove",
        },
      },
      {
        path: "/HomeView/vue3View",
        name: "vue3View",
        component: () => import("../views/vue3View.vue"),
        meta: {
          title: "vue3面试题",
          isShow: true,
          img: "el-icon-folder-delete",
        },
      },
      {
        path: "/HomeView/gitView",
        name: "gitView",
        component: () => import("../views/gitView.vue"),
        meta: {
          title: "git面试题",
          isShow: true,
          img: "el-icon-folder-checked",
        },
      },
      {
        path: "/HomeView/webpackView",
        name: "webpackView",
        component: () => import("../views/webpackView.vue"),
        meta: {
          title: "webpack面试题",
          isShow: true,
          img: "el-icon-s-cooperation",
        },
      },

      {
        path: "/HomeView/otherView",
        name: "otherView",
        component: () => import("../views/otherView.vue"),
        meta: {
          title: "other面试题",
          isShow: true,
          img: "el-icon-s-grid",
        },
      },
    ],
  },
  {
    path: "/loginView",
    name: "loginView",
    component: loginView,
  },
  // {
  //   path: '/about',
  //   name: 'about',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: function () {
  //     return import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  //   }
  // }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// 全局拦截
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem("token");
  if (token && to.path !== "/loginView") {
 
    // 有token 但不是去 login页面 通过
    next();
  } else if (token && to.path === "/loginView") {
    // 有token 但是去 login页面 不通过 重定向到首页
    next("/");
  } else if (!token && to.path !== "/loginView") {
    // 没有token 但不是去 login页面 不通过（未登录不给进入）
    next("/loginView");
  } else {
    // 剩下最后一种 没有token 但是去 login页面 通过
    next();
  }
})

export default router
